<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css"
      rel="stylesheet"
    />
    <style>
      .container {
        margin-top: 40px;
        margin-bottom: 40px;
        background-color: #f8f8fb;
      }
    </style>
  </head>
  <body>
    <h1>Bootstrap核心布局练习</h1>
    <h2>定宽容器</h2>
    <div class="container">
      <h1>Hello, world!</h1>
    </div>
    <h2>通栏容器</h2>
    <div class="container-fluit">
      <h1>Hello, world!</h1>
    </div>
    <h2>栅格系统</h2>
    <div class="container">
      <div class="row">
        <div class="col">12列中的XX列</div>
        <div class="col">12列中的XX列</div>
        <div class="col">12列中的XX列</div>
      </div>
    </div>
    <div class="container">
      <h1 class="text-center fs-1">作品标题</h1>
    </div>
    <div class="container">
      <div class="row gx-4">
        <div class="col-sm-8">50%</div>
        <div class="col-sm-4">50%</div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <div
            id="carouselExampleDark"
            class="carousel carousel-dark slide"
            data-bs-ride="carousel"
          >
            <div class="carousel-indicators">
              <button
                type="button"
                data-bs-target="#carouselExampleDark"
                data-bs-slide-to="0"
                class="active"
                aria-current="true"
                aria-label="Slide 1"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleDark"
                data-bs-slide-to="1"
                aria-label="Slide 2"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleDark"
                data-bs-slide-to="2"
                aria-label="Slide 3"
              ></button>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active" data-bs-interval="10000">
                <img
                  src="resource\img\NationalDay2022_ZH-CN3861603311_1920x1080.jpg"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>First slide label</h5>
                  <p>
                    Some representative placeholder content for the first slide.
                  </p>
                </div>
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <img
                  src="resource\img\OHR.IsarwinkelSylvenstein_ZH-CN2963187862_1920x1080.jpg"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Second slide label</h5>
                  <p>
                    Some representative placeholder content for the second
                    slide.
                  </p>
                </div>
              </div>
              <div class="carousel-item">
                <img
                  src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third slide label</h5>
                  <p>
                    Some representative placeholder content for the third slide.
                  </p>
                </div>
              </div>
            </div>
            <button
              class="carousel-control-prev"
              type="button"
              data-bs-target="#carouselExampleDark"
              data-bs-slide="prev"
            >
              <span
                class="carousel-control-prev-icon"
                aria-hidden="true"
              ></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button
              class="carousel-control-next"
              type="button"
              data-bs-target="#carouselExampleDark"
              data-bs-slide="next"
            >
              <span
                class="carousel-control-next-icon"
                aria-hidden="true"
              ></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
        <div class="col-sm">
          <ul>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <div
            id="carouselExampleDark"
            class="carousel carousel-dark slide"
            data-bs-ride="carousel"
          >
            <div class="carousel-indicators">
              <button
                type="button"
                data-bs-target="#carouselExampleDark"
                data-bs-slide-to="0"
                class="active"
                aria-current="true"
                aria-label="Slide 1"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleDark"
                data-bs-slide-to="1"
                aria-label="Slide 2"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleDark"
                data-bs-slide-to="2"
                aria-label="Slide 3"
              ></button>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active" data-bs-interval="10000">
                <img
                  src="resource\img\NationalDay2022_ZH-CN3861603311_1920x1080.jpg"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>First slide label</h5>
                  <p>
                    Some representative placeholder content for the first slide.
                  </p>
                </div>
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <img
                  src="resource\img\OHR.IsarwinkelSylvenstein_ZH-CN2963187862_1920x1080.jpg"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Second slide label</h5>
                  <p>
                    Some representative placeholder content for the second
                    slide.
                  </p>
                </div>
              </div>
              <div class="carousel-item">
                <img
                  src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third slide label</h5>
                  <p>
                    Some representative placeholder content for the third slide.
                  </p>
                </div>
              </div>
            </div>
            <button
              class="carousel-control-prev"
              type="button"
              data-bs-target="#carouselExampleDark"
              data-bs-slide="prev"
            >
              <span
                class="carousel-control-prev-icon"
                aria-hidden="true"
              ></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button
              class="carousel-control-next"
              type="button"
              data-bs-target="#carouselExampleDark"
              data-bs-slide="next"
            >
              <span
                class="carousel-control-next-icon"
                aria-hidden="true"
              ></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
        <div class="col-sm">
          <ul>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
          </ul>
        </div>
        <div class="col-sm">
          <ul>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
            <li>抗美援朝战争，我们不能忘记这些人和事</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col">
          <img
            src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
            width="300"
          />
        </div>
        <div class="col">
          <img
            src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
            width="300"
          />
        </div>
        <div class="col">
          <img
            src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
            width="300"
          />
        </div>
        <div class="col">
          <img
            src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
            width="300"
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <ul>
            <li>新闻标题</li>
          </ul>
          <ul>
            <li>新闻标题</li>
          </ul>
          <ul>
            <li>新闻标题</li>
          </ul>
          <ul>
            <li>新闻标题</li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li>新闻标题</li>
          </ul>
          <ul>
            <li>新闻标题</li>
          </ul>
          <ul>
            <li>新闻标题</li>
          </ul>
          <ul>
            <li>新闻标题</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-5">
          <img
            src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
            alt=""
            class="img-fluid"
          />
        </div>
        <div class="col-sm-7">
          <div class="row">
            <div class="col">
              <img
                src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
                alt=""
                class="img-fluid"
              />
            </div>
            <div class="col">
              <img
                src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
                alt=""
                class="img-fluid"
              />
            </div>
            <div class="col">
              <img
                src="resource\img\OHR.ZNPVR_ZH-CN0123954914_1920x1080.jpg"
                alt=""
                class="img-fluid"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar w/ text</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarText"
            aria-controls="navbarText"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <span class="navbar-text">
              Navbar text with an inline element
            </span>
          </div>
        </div>
      </nav>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.js"></script>
  </body>
</html>
